<template>
  <main>
    <el-button icon="el-icon-arrow-left" class="add-btn" @click="prev" :disabled="num===0">前</el-button>
    <div class="m-slide" :style="{'max-width': maxShowNum * itemLength + 'px'}">
      <div class="m-slide-wrap" :style="{'margin-left': num * itemLength + 'px','transition': 'all .3s ease-out .1s'}">
        <slot></slot>
      </div>
    </div>
    <el-button icon="el-icon-arrow-right" class="add-btn" @click="next" :disabled="num === maxShowNum - items.length || items.length < maxShowNum">后</el-button>
  </main>
</template>

<script>
export default {
  name: "Slide",
  componentName: 'Slide',

  provide() {
    return {
      itemLong: this.itemLength,
      reactiveActive: () => this.active,
      changeActive: (name) => {this.active = name}
    }
  },
  props: {
    maxShowNum: Number,
    itemLength: Number,
  },
  data(){
    return {
      items: [],
      num: 0,
      active: '',
    }
  },
  created() {
    this.$on('slide.add', (item) => {
      if(item){
        this.items.push(item)
      }
      if(this.items.length === 1){
        this.active = this.items[0].slideName;
      }
    })
  },
  methods: {
    prev(){
      if(this.num < 0) {
        this.num += 1;
      }
    },
    next(){
      if (this.num > -(this.items.length - this.maxShowNum)) {
        this.num -= 1;
      }
    },
  },
}
</script>

<style scoped>
  main{
    display: flex;
    flex-direction: row;;
    align-items: center;
  }
  .m-slide{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
  }
  .m-slide-wrap{
    display: flex;
  }
  .active-tab {
    color: red;
    font-size: 16px;
  }
</style>
